<template>
	<view class="page home bgf7 c85 pt10">
		<view class="bgff cff py8 px10 mx10 rel c00">
			<view class="flex flexC flexB fs16 dateBox">
				<text @click="clickSelectDate(item,index)" :class="item.check==true?'bged':'bor'"
					v-for="(item,index) in dateList" class="  r40" :key="index">{{item.name}}</text>
			</view>
			<view class="flex flexC fs13 my12 timeBox">
				<text>日期</text>
				<picker mode="date" @change="dateStartChange">
					<text class="time bor r5 mx12">{{startTime}}</text>
				</picker>
				<text>到</text>
				<picker mode="date" @change="dateEndChange">
					<text class="time bor r5 mx12">{{endTime}}</text>
				</picker>
			</view>
			<view class="flex1 aliC flex flexC">
				<text>店铺选择</text>
				<view @click="showShop" class="shopBox flex flexC bor r5 ml16 pr6">
					<text class="flex1">{{selectShop.name}}</text>
					<image class="ml6 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
				
				<button @click="sure" class="bg41  fs13 r40  ml16 btn">搜索</button>
			</view>
		</view>
		<scroll-view scroll-y class="list rel" :style="{height: 'calc(100vh - 246rpx - ' + statusBar +'px)'}">
			<view class="c00 px15 py12 bgf6 mx10 mt6">
				<text class="c41 fs12 mr6">•</text>
				<text class="bold6 fs14">经营数据</text>
			</view>
			<view class="bgff mx10">
				<view class="flex flexC aliC">
					<view class="flex1 py16">
						<view class="bold6 fs20 cf1">{{data.amount}}</view>
						<view class="c85 mt2">累计流水(元)</view>
					</view>
					<view class="flex1 py16">
						<view class="bold6 fs20 cf1">{{data.profit}}</view>
						<view class="c85 mt2">实际收入(元)</view>
					</view>
				</view>
				<view class="flex flexC flexB flexW aliC pb8">
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.qp}}</view>
						<view class="c85 mt2">包厢预约(元)</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.mt}}</view>
						<view class="c85 mt2">美团核销(元)</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.dou}}</view>
						<view class="c85 mt2">抖音核销(元)</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.tuan}}</view>
						<view class="c85 mt2">团购券购买(元)</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.charge}}</view>
						<view class="c85 mt2">用户充值(元)</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.balance}}</view>
						<view class="c85 mt2">余额抵扣</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.discount}}</view>
						<view class="c85 mt2">折扣券抵扣</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.tq}}</view>
						<view class="c85 mt2">台球预约</view>
					</view>
					<view class="w32 py8">
						<view class="bold6 fs20 cf1">{{data.refund}}</view>
						<view class="c85 mt2">退款金额</view>
					</view>
				</view>
			</view>
			<view class="c00 flex flexC px15 py12 bgf6 mx10 mt6">
				<text class="c41 fs12 mr6">•</text>
				<text class="bold6 fs14 flex1">经营流水趋势图</text>
				<view class="flex flexC" @click="clickMore">
					<text>查看更多</text>
					<text class="arrowR p1 ml2"></text>
				</view>
			</view>
			<view class="charts-box mx10 r2 py12 bgff">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>
			<view class="c00 flex flexC px15 py12 bgf6 mx10 mt6">
				<text class="c41 fs12 mr6">•</text>
				<text class="flex1 bold6">包厢销售</text>
			</view>
			<view class="bgff mx10 c85 py4 aliC fs14">
				<view class="flex flexC c00 py12 bold6 fs12">
					<text class="w-3">序号</text>
					<text class="flex1">名字</text>
					<text class="w-5">金额(元)</text>
					<text class="w-5">预定次数</text>
				</view>
				<view v-for="(item,index) in rooms" :key="index" class="flex flexC py8">
					<text class="w-3">{{index+1}}</text>
					<text class="flex1">{{item.name}}</text>
					<text class="w-5">{{item.amount}}</text>
					<text class="w-5">{{item.count}}</text>
				</view>
			</view>
			<view class="c00 flex flexC px15 py12 bgf6 mx10 mt6">
				<text class="c41 fs12 mr6">•</text>
				<text class="flex1 bold6">客户消费排行</text>
				<!-- <view class="flex flexC">
					<text>查看更多</text>
					<text class="arrowR p1 ml2"></text>
				</view> -->
			</view>
			<view class="bgff mx10 c85 py4 aliC fs14">
				<view class="flex flexC c00 py12 fs12 bold6">
					<text class="w-3">序号</text>
					<text class="flex1">手机号</text>
					<text class="w-5">金额(元)</text>
					<text class="w-5">预定次数</text>
				</view>
				<view v-for="(item,index) in members" :key="index" class="flex flexC py8">
					<text class="w-3">{{index+1}}</text>
					<text class="flex1">{{item.username}}{{item.mobile}}</text>
					<text class="w-5">{{item.amount}}</text>
					<text class="w-5">{{item.count}}</text>
				</view>
			</view>
			<view style="padding: 80rpx 0;"></view>
			<tn-date-picker :beforeDateDisable="false" color="rgb(72,143,244)" :show="showPicker" :format="'yyyy-mm-dd'"
				:monthNum="7" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" @confirm="ed"
				@cancel="ed" />

		</scroll-view>

		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>
		<tabbar></tabbar>
	</view>
</template>

<script>
	const statusBar = uni.getSystemInfoSync().statusBarHeight + 10;

	import TnDatePicker from "@/components/tn-datepicker/tn-datepicker.vue";
	export default {
		components: {
			TnDatePicker,
		},
		data() {
			return {
				statusBar,
				dateIndex: 0,
				shopList: [],
				selectShop: null,
				data: null,
				showPicker: false,
				date: '',
				value: [],
				members:[],
				dateList: [

					{
						name: '昨天',
						check: true
					},

					{
						name: '近7天',
						check: false

					},
					{
						name: '上月',
						check: false

					},
					{
						name: '本月',
						check: false

					}
				],
				dateStr: '今天',
				chartData: {},
				rooms: [],
				startTime: '2024-03-01',
				endTime: '2024-03-01',
				startDate: '',
				endDate: '',
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					dataPointShape: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 10, 15],
					// enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: false,
						axisLine: false
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
			}
		},
		onLoad() {


			uni.hideHomeButton();

			var date = this.getRecentDay_Date(-1);
			console.info("===date===" + date);
			this.startTime = date;
			this.endTime = date;
			this.getShopList();


		},
		methods: {
			
			clickMore(){
				uni.navigateTo({
					url:'../data/more?start='+this.startTime+"&end="+this.endTime
				})
			},
			
			sure(){
				this.getIndex();
				this.getDataOrder();
				this.getRoom();
				this.getMember();


			},

			clickSelectDate(item, index) {

				for (var i = 0; i < this.dateList.length; i++) {
					this.dateList[i].check = false;
				}
				item.check = true;
				if (index == 0) {
					var date = this.getRecentDay_Date(-1);
					console.info("===date===" + date);
					this.startTime = date;
					this.endTime = date;
				} else if (index == 1) {
					var date = this.getRecentDay_Date(-1);
					var date2 = this.getRecentDay_Date(-7);
					console.info("===date2===" + date2);
					console.info("===date1===" + date);
					this.startTime = date2;
					this.endTime = date;
				} else if (index == 2) {

					var d = this.getLastMonth();
					this.startTime = d[0];
					this.endTime = d[1];

				} else if (index == 3) {
					var d = this.getThisMonth();
					console.info(d);
					this.startTime = d[0];
					this.endTime = d[1];
				}
			},

			getThisMonth() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth()
				const thisMonthStartDate = this.formatDate(new Date(year, month, 1))
				const thisMonthEndDate = this.formatDate(new Date(year, month + 1, 0))
				// 下个月第0天表示本月最后一天
				const thisMonth = []
				thisMonth.push(thisMonthStartDate, thisMonthEndDate)
				return thisMonth
			},



			getLastMonth() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth()
				const lastMonthStartDate = this.formatDate(new Date(year, month - 1, 1))
				const lastMonthEndDate = this.formatDate(new Date(year, month, 0))
				//本月第0天表示上个月最后一天
				const lastMonth = []
				lastMonth.push(lastMonthStartDate, lastMonthEndDate)
				return lastMonth
			},
			formatDate(date) {
				const year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				if (month < 10) {
					month = `0${month}`
				}
				if (day < 10) {
					day = `0${day}`
				}
				return (`${year}-${month}-${day}`)
			},



			dateStartChange(e) {
				
				this.startTime = e.detail.value;
			},
			dateEndChange(e) {
				
				
				this.endTime = e.detail.value;
			},
			
			
			
			getRecentDay_Date: function(n) {
				var dd = new Date();
				dd.setDate(dd.getDate() + n); //获取n天后的日期
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1; //获取当前月份的日期
				if (m < 10) {
					m = "0" + m;
				}
				var d = dd.getDate();
				if (d < 10) d = "0" + d;
				let day = y + '-' + m + '-' + d;
				console.log(day);
				return day;
			},
			getRecentMonth_Date: function(n) {
				const datenow = new Date();

				var m = datenow.getMonth() + 1;
				var d = datenow.getDate();
				if (m < 10) {
					m = "0" + m;
				}
				if (d < 10) d = "0" + d;
				const dateend =
					datenow.getFullYear().toString() +
					'-' + m +
					'-' + d;
				datenow.setMonth(datenow.getMonth() - n);
				let dyear = datenow.getFullYear();
				let dmonth = datenow.getMonth() + 1;
				dmonth = dmonth < 10 ? "0" + dmonth : dmonth;
				let dday = datenow.getDate();
				dday = dday < 10 ? "0" + dday : dday;

				const datestart =
					dyear.toString() + '-' + dmonth + '-' + dday;

				var result = new Array();
				result.push(datestart);
				result.push(dateend);

				return result;
			},


			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this.date = e.value;
					this.dateStr = e.value;

					//选择的值
					console.log('value => ' + e.value[0]);
					console.log('value =>2 ' + e.value[1]);

					this.startDate = e.value[0];
					this.endDate = e.value[1];
					this.getIndex();
					this.getDataOrder();
					this.getRoom();
					this.getMember();
					//原始的Date对象
				}
			},

			selectDateChange(e) {
				console.info(e);
				this.dateIndex = e.detail.value;
				if (this.dateIndex == 6) {
					this.showPicker = true;
				} else {
					this.dateStr = this.dateList[this.dateIndex].name;
					this.getIndex();
					this.getDataOrder();
					this.getRoom();
					thsi.getMember();
				}

			},

			getRoom() {
				let param = {
					shop_id: this.selectShop.id,
					startDate: this.startTime,
					endDate: this.endTime
				};
				let that = this;
				this.$api.v2Room(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.rooms = res.data;
					} else {

					}
				})
			},
			
			getMember() {
				let param = {
					shop_id: this.selectShop.id,
					startDate: this.startTime,
					endDate: this.endTime
				};
				let that = this;
				this.$api.v2Member(param).then(res => {
			
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.members = res.data;
					} else {
			
					}
				})
			},

			getIndex() {
				let param = {
					shop_id: this.selectShop.id,
					startDate: this.startTime,
					endDate: this.endTime
				};
				let that = this;
				this.$api.dataIndexV2(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.data = res.data;

					} else {

					}
				})
			},

			getShopList() {
				let param = {
					keyword: this.keyword
				};
				let that = this;
				this.$api.getShopList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shopList = res.data;
						if (that.shopList.length > 0) {
							that.selectShop = that.shopList[0];
							that.getIndex();
							that.getDataOrder();
							that.getRoom();
							that.getMember();
						}
					} else {

					}
				})
			},

			onClose() {
				this.$refs.shopPicker.close();
			},
			showShop() {
				this.$refs.shopPicker.open();

			},
			search(value) {

				this.keyword = value;
				this.getShopList();
			},

			onSelectShop(item) {
				this.selectShop = item;
				this.$refs.shopPicker.close();
				// this.getIndex();
				// this.getDataOrder();
				// this.getRoom();

			},

			getDataOrder() {


				let param = {
					shop_id: this.selectShop.id,
					startDate: this.startTime,
					endDate: this.endTime
				};
				let that = this;
				this.$api.v2Order(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {

						let dd = {
							categories: res.data.key,
							series: [{
								name: "订单金额",
								data: res.data.value
							}]
						};
						that.chartData = dd;
					} else {

					}
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.mb50 {
			margin-bottom: 100rpx;
		}
		.btn {
			line-height: 60rpx;
			width: 100rpx;
			
		}

		.dateBox {
			text {
				display: inline-block;
				width: 136rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
			}
		}

		.timeBox {
			.time {
				width: 244rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				display: inline-block;
			}
		}

		.shopBox {
			min-width: 244rpx;
			height: 56rpx;
			line-height: 56rpx;
		}

		.cf1 {
			color: #FF1D1D;
		}

		.w12 {
			width: 24rpx;
			height: 24rpx;
		}

		.down {
			width: 36rpx;
			height: 36rpx;
		}

		.bg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rel {
			position: relative;
		}

		.bg5f {
			width: 36rpx;
			height: 36rpx;
			background-color: #5FA0F5;
		}

		.w32 {
			width: 33%;
		}

		.charts-box {
			height: 200px;
		}
	}
</style>